<template>
	<div
        :class="[
            'cvu-row',
            justify !== 'start' ? `is-justify-${justify}` : '',
            align !== 'top' ? `is-align-${align}` : '',
            {'cvu-row-flex': type === 'flex'}
        ]"
        :style="style"
    >
        <slot />
    </div>
</template>

<script>
export default {
    name: 'cvu-row',
    components: {},
    props: {
        // 布局模式，可选 flex，现代浏览器下有效
        type: {
            type: String,
            default: 'flex'
        },
        // flex布局下的水平排列方式 [start/end/center/space-around/space-between]
        justify: {
            type: String,
            default: 'start'
        },
        // flex布局下的垂直排列方式 [top/middle/bottom]
        align: {
            type: String,
            default: 'top'
        },
        // 栅格间距
        gutter: {
            type: Number,
            default: 16
        }
    },
    data() {
        return {}
    },
    computed: {
        style() {
            let style = {}
            if (this.gutter !== 0) {
                style = {
                    marginLeft: this.gutter / -2 + 'px',
                    marginRight: this.gutter / -2 + 'px'
                }
            }
            return style
        }
    },
    watch: {},
    methods: {}
}
</script>

<style lang="scss" scoped>
@import '../../../style/_index.scss';
.cvu-row {
	position: relative;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
    flex-flow: row wrap;
}

.cvu-row::after,
.cvu-row::before {
	display: table;
	content: ""
}

.cvu-row::after {
	clear: both
}

.cvu-row-flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.cvu-row-flex:after,
.cvu-row-flex:before {
	display: none
}

.cvu-row-flex.is-justify-center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.cvu-row-flex.is-justify-end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end
}

.cvu-row-flex.is-justify-space-between {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.cvu-row-flex.is-justify-space-around {
	-ms-flex-pack: distribute;
	justify-content: space-around
}

.cvu-row-flex.is-align-middle {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.cvu-row-flex.is-align-bottom {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end
}


</style>
